<template>
  <div class="topic">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :immediate-check="false"
    >
      <div class="item" v-for="item in topicList" :key="item.id"  @click="toTopic(item.id)">
        <img :src="item.scene_pic_url" alt="" />
        <h2>{{ item.title }}</h2>
        <p class="text">{{ item.subtitle }}</p>
        <p class="price">{{item.price_info}}元起</p>
      </div>
    </van-list>

    <nav-tabber :active="1"></nav-tabber>
  </div>
</template>

<script>
import { getTopicList } from "@/api/topic/topic.js";
import NavTabber from "@/components/common/nav-tabber"
export default {
  data() {
    return {
      topicList: [],
      page: 1,
      loading: false,
      finished: false,
      total: 0,
    };
  },
  methods: {
    getData() {
        getTopicList({ page: this.page }).then((res) => {
        this.topicList.push(...res.data);
        this.total = res.total;
        this.page++;
        this.loading = false;
      });
    },
    onLoad() {
      if (this.page <= this.total) {
        this.getData();
      } else {
        this.finished = true;
      }
    },
    toTopic(id) {
      this.$router.push({ path: "/pages/topic/detail", query: { id } });
    },
  },
  created() {
    this.getData();
  },
  components:{
    "nav-tabber":NavTabber
  }
};
</script>

<style lang="scss" scoped>
.topic {
  padding-bottom: 100px;
}

.item {
    margin-bottom: 10px;
  width: 100%;
  height: 334px;
  background-color: #fff;
  text-align: center;

  img {
    display: block;
    width: 100%;
    height: 210px;
  }

  h2{
      margin-top: 15px;
      font-size: 17px;
      font-weight: 500;
      color: rgb(51, 51, 51);
  }

  .text{
      margin-top: 18px;
      font-size: 12px;
      color: rgb(153, 153, 153);
  }
  
  .price{
      margin-top: 13px;
      font-size: 13px;
      color: rgb(180, 40, 45);
  }
}
</style>